<template>
  <el-dialog
    :visible.sync="visible"
    :before-close="beforeClose"
    :close-on-click-modal="false"
    title="审批推荐"
    append-to-body
    class="dialog-sm"
    top="30px"
    width="600px"
  >
    <div
      v-if="+infoData.is_finished_form !== 1"
      class="p-5 text-center text-muted border rounded bg-light"
    >
      请先完成申请表，打印盖章后进行审核
    </div>
    <el-form v-else label-width="110px" ref="form" :model="formData" :rules="rules">
      <el-form-item label="主体名称:">
        {{ infoData.customer_name }}
      </el-form-item>
      <el-form-item label="上传附件:" prop="attachment">
        <upload-oss
          single-image
          ref="upload"
          accept="image/*"
          :on-complete="handleComplete"
          :file-list="fileList"
          class="form-control-ml"
        ></upload-oss>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" :loading="loading" @click="handlePass" class="btn-long">
          审批通过
        </el-button>
        <el-button type="danger" @click="handleReject" :loading="loading" class="btn-long">
          审批拒绝
        </el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  props: {
    visible: Boolean,
    infoData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      rules: {
        attachment: { required: true, message: '请选择图片', trigger: 'change' },
      },
      fileList: [],
      formData: {
        attachment: '',
      },
      loading: false,
    }
  },
  watch: {
    infoData: {
      handler: function (val) {
        if (this.level === 3 && this.infoData.county_approval_attachment) {
          this.fileList.push({ url: this.infoData.county_approval_attachment })
        } else if (this.level === 2 && this.infoData.city_approval_attachment) {
          this.fileList.push({ url: this.infoData.city_approval_attachment })
        } else if (this.level === 1 && this.infoData.pro_approval_attachment) {
          this.fileList.push({ url: this.infoData.pro_approval_attachment })
        }
      },
      immediate: true,
      deep: true,
    },
  },

  created() {},
  computed: {
    ...mapGetters(['user']),
    userName() {
      return this.user.realName || this.user.userName
    },
    level() {
      return +this.user.orgRegionLever
    },
  },
  methods: {
    handlePass() {
      if (this.level === 3) {
        this.formData.county_approval = 1
      } else if (this.level === 2) {
        this.formData.city_approval = 1
      } else if (this.level === 1) {
        this.formData.pro_approval = 1
      }
      this.$refs.upload.submit()
    },

    handleReject() {
      if (this.level === 3) {
        this.formData.county_approval = 2
      } else if (this.level === 2) {
        this.formData.city_approval = 2
      } else if (this.level === 1) {
        this.formData.pro_approval = 1
      }
      this.$confirm('确认拒绝?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'info',
      })
        .then(async () => {
          await this.$refs.upload.submit()
        })
        .catch(() => {})
    },

    handleComplete(images) {
      this.formData.attachment = images.length ? images[0].url : ''
      this.$refs.form.validate(valid => {
        if (valid) {
          this.handleApproval()
        } else {
          this.$message.error('输入错误，请重新填写!')
        }
      })
    },

    handleApproval() {
      const { attachment, ...data } = this.formData
      const date = this.$utils.dateFormat(new Date(), 'yyyy-MM-dd hh:mm:ss')
      if (this.level === 3) {
        data.county_approval_attachment = attachment
        data.county_approval_time = date
        data.county_approval_person = this.userName
      } else if (this.level === 2) {
        data.city_approval_attachment = attachment
        data.city_approval_time = date
        data.city_approval_person = this.userName
      } else if (this.level === 1) {
        data.pro_approval_attachment = attachment
        data.pro_approval_person = this.userName
        data.pro_approval_time = date
      }
      this.$api
        .updateData(
          this.$serviceName,
          'project_white_list',
          this.infoData.project_white_list_id,
          data
        )
        .then(() => {
          this.$message.success('审批完成')
          this.$emit('success')
          this.beforeClose()
        })
        .catch(() => {
          this.$message.error('操作失败')
        })
    },

    beforeClose() {
      this.fileList = []
      this.$emit('update:visible', false)
    },
  },
}
</script>
<style lang="scss" scoped></style>
